
<template>
  <h1>{{ msg }}</h1>
  <input v-debounce="{ fn: handleInput, event: 'input', delay: 3000 }" />
  <div class="card">
    <button type="button" v-debounce="debounce">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
  <div class="bl-test">
        测试
        <div class="bl-test__inner">
            element
        </div>
        <div class="bl-test--success">modify</div>
  </div>
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
    starter
  </p>

  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import vDebounce from '@/directives/debounceDirectve'; //导入自定义指令函数


const handleInput = (event: { target: { value: any; }; }) => {
  console.log(event.target.value); // 或者您希望执行的其他操作
};
const count = ref(0)
const click = () => {
  debounce.value.delay=debounce.value.delay+1000
  count.value++;
}
const debounce = ref(
  { fn: click,
    event: 'click',
     delay: 2000 
    }
)
</script >
<style scoped lang="scss">

@include b(test){
  color: red;
  font-size: var(--size) ;
  @include e(inner){
    color: var(--color);
  }
  @include m(success){
    color: green;
  }
}

.read-the-docs {
  color: #888;
}
</style>
